<template>
	<div id="moviePage"
		v-infinite-scroll="loadMore" v-if="detailmovie.length != 0"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
		>

		<div id="movie-top">
			<div class="BG"></div>
			<div id="moviedetail" :style="{'background-image':`url(${addPix(detailmovie.img)})`}">
			</div>
			<div class="detail-middle">
				<div class="detail-left">
					<img v-lazy="addPix(detailmovie.img)" alt="" />
				</div>

				<div class="movie-middle">
					<h2 class="public">{{detailmovie.nm}}</h2>
					<div class="public">{{detailmovie.enm}}</div>
					<div class="yellow">{{detailmovie.sc}}
						<i>({{detailmovie.snum}}人评论)</i> </div>
					<div class="public">{{detailmovie.cat}}</div>
					<div class="public">{{detailmovie.src}}/{{detailmovie.dur}}分钟</div>
					<div class="public">{{detailmovie.pubDesc}}</div>

				</div>
				<div class="detail-btn">></div>
				<div class="cliearfix"></div>
			</div>

		</div>

		<!--上映的天数-->
		<div class="dates">
			<div v-for="(item,index) in dates" class="times" :key="item.date" 
			v-on:click="morecinems(item.date,index)" :class="{active:index==dayIndex}" >{{item.date}}</div>

		</div>
		<!--电影院品牌-->
		<!-- <div>全城品牌</div> -->
		<div class="cinemas" v-for="(item ,index) in cinemas" :key='item.id' @click="toShow(id,days,item.id)" >
			<div class="detail">
				<div class="price">
					<div class="nm">{{item.nm}}</div>
				 <span class="sellPrice">	
				<span class="sell" >{{item.sellPrice}}</span>
				<span class="q">元起</span>
				</span>
				</div>
			
			<div class="addr">{{item.addr}}</div><i class="distance">{{item.distance}}</i>
			<div class="tag">
			<i v-if="item.tag.endorse==1" class="endorse">改签</i>
			<i v-if="item.tag.snack==1" class="snack">小吃</i>
			<i class="vipTag">{{item.tag.vipTag}}</i>
			 <span class="hallType" v-for="(hall,num) in item.tag.hallType" :key="num">{{hall}}</span>
			</div>
			
			<div class="citycar" v-if="item.promotion.cardPromotionTag" >
			 <img src="../img/car.png" alt="" />
			<div class="car">{{item.promotion.cardPromotionTag}}</div>
		</div>
			<!--天数-->
			<div class="showTimes">近期场数{{item.showTimes}}</div>
			</div>
		</div>
	</div>

</template>
<style lang="scss" scoped>
	img[lazy=loading]{
		width: 20px;
		height: 20px;
		margin: auto;
	}
</style>

<script>
//	import '../scss/movie.scss';
	import qs from 'qs';
	export default {
		created() {
			 
			 this.days = this.day()
			this.id = this.$route.params.movieId
			//电影详情
			this.axios.get('/ajax/detailmovie', {
				params: {
					movieId: this.id,
				}
			}).then((res) => {
				this.detailmovie = res.data.detailMovie;
				console.log("电影详情", res.data.detailMovie)
				console.log(this.$store.state.headerTitle)
				//提交修改
				this.$store.commit('changeHT', this.detailmovie.nm)
				
			})
			//调用渲染  初始化
			this.getCinemas(this.days, 0);

		},

		data() {
			return {
				id: '',//电影的id
				//保存电影详情
				detailmovie: {},
			     dayIndex:0,
				 offset:0,
				//保存电影院信息
				cinemas: [],
				dates:[],
				days:'',    //获取当天的时间去获取当天的数据
				loading:true   //开始不用触发
			}
		},
		methods: {
			//处理年、月、份的格式
			day(){
				 var d = new Date();
				  var  year = d.getFullYear();
				  var  month = d.getMonth()+1;
				  var   day = d.getDate();
				  return year + '-'+ month + '-'+ day
				 
			},
			 
			
			addPix(url) {
				if(url != null) {
					return url.replace('w.h', '128.180')
				}

			},
			getCinemas(day, offset) {
				// 影院信息
				this.axios.post('/ajax/movie', qs.stringify({
					//请求参数拿到对应的数据
					movieId: this.id,    //对应电影的id
					day: day,            //对应的上映的天数
					offset: offset,
					limit: 20,
					districtId: -1,
					lineId: -1,
					hallType: -1,
					brandId: -1,
					serviceId: -1,
					areaId: -1,
					stationId: -1,
					item: "",
					updateShowDay: true,
					reqId: 1545444608614,
					cityId: 20,

				})).then((res) => {
						console.log("res",res)
					if(res.data.cinemas.length !== 0) {
						console.log( "aaa" ); 
						this.cinemas = res.data.cinemas
					} else {
						let day1 = res.data.showDays.dates[0].date
						console.log("day",day)
						this.getCinemas(day1)
						
					}

					console.log("电影院", this.cinemas);
					this.dates = res.data.showDays.dates;
					console.log("上映时间", this.dates);
					this.loading=false
					
				})

			},
			//底部刷新加载更多
			loadMore(){
				     
				      console.log("到底啦")
				      this.offset += 20;
				      this.getCinemas(this.days, this.offset);
				     
			},
			
			//根据不同日期刷新不同电影院
			morecinems(days,index){
				console.log("日期",days);
				this.getCinemas(days)
				this.dayIndex=index
			},
			
			toShow(id,days,cinemaId){
				console.log(id,days,cinemaId)
				
				this.$router.push({name:'show',params:{movieId:id,day:days,cinemasId:cinemaId}})
				
			}
			
			
		}

	}
</script>

<style>

</style>